<template>
    <div class="home">
        <p>情况二：监视reactive定义的 对象类型 数据</p>
        <p>姓名：{{ person.name }}</p>
        <p>年龄：{{ person.age }}</p>
        <button @click="changName">修改名字</button>
        <button @click="changAge">修改年龄</button>
        <button @click="changPenson">修改整个人</button>
    </div>
</template>


<script setup lang="ts" name="Page17">
/*
    1.ref 定义的数据。
    2.reactive 定义的数据。
    3.函数返回一个值。
    4.一个包含上述内容的数组。
*/

// 监视 ref 定义的 对象类型数据 监视的是对象的地址值变化
// 监视，情况一:监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动于
// watch的第一个参数是:被监视的数据
// watch的第二个参数是:监视的回调// watch的第三个参数是:配置对象(deep、rimmediate)
import { reactive, ref, watch } from 'vue';
let person = ref({
    name: '张三',
    age: 18
});
const changAge = () => {
    person.value.age += 1
}
const changName = () => {
    person.value.name += "~"
}
const changPenson = () => {
    person.value = { name: 'dd', age: 19 }
}


watch(person.value, (newValue, oldValue) => {
    console.log('person', newValue, oldValue)
}, { deep: true, immediate: true })
watch(person, (newValue, oldValue) => {
    console.log('person1', newValue, oldValue)
}, { deep: true, immediate: true })

/*
// 
import { reactive, ref, watch } from 'vue';
let person = reactive({
    name: '张三',
    age: 18
});
const changAge = () => {
    person.age += 1
}
const changName = () => {
    person.name += "~"
}
const changPenson = () => {
    person = { name: 'dd', age: 19 }
}

watch(person, (newValue, oldValue) => {
    console.log('person', newValue, oldValue)
})
    */
</script>

<style lang="scss" scoped></style>